<template>
  <div class="cropper-modal" v-if="visible">
    <div class="cropper-container">
      <div class="cropper-header">
        <h3>裁剪头像</h3>
        <i class="iconfont icon-close" @click="onCancel"></i>
      </div>
      <div class="cropper-content">
        <VueCropper
          ref="cropperRef"
          :img="imageUrl"
          :outputSize="1"
          :outputType="outputType || 'jpeg'"
          :info="true"
          :full="false"
          :canMove="true"
          :canMoveBox="true"
          :original="false"
          :autoCrop="true"
          :autoCropWidth="200"
          :autoCropHeight="200"
          :fixed="true"
          :fixedNumber="[1, 1]"
          :centerBox="true"
          :high="true"
          :infoTrue="true"
          :maxImgSize="maxSize || 2048"
        />
      </div>
      <div class="cropper-footer">
        <div class="zoom-controls">
          <button @click="rotate(-90)" title="向左旋转">
            <i class="iconfont icon-rotate-left"></i>
          </button>
          <button @click="rotate(90)" title="向右旋转">
            <i class="iconfont icon-rotate-right"></i>
          </button>
          <button @click="zoom(0.1)" title="放大">
            <i class="iconfont icon-zoom-in"></i>
          </button>
          <button @click="zoom(-0.1)" title="缩小">
            <i class="iconfont icon-zoom-out"></i>
          </button>
        </div>
        <div class="action-buttons">
          <button class="cancel" @click="onCancel">取消</button>
          <button class="confirm" @click="onConfirm">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import 'vue-cropper/dist/index.css'
import VueCropper from 'vue-cropper'

const props = defineProps<{
  visible: boolean
  imageUrl: string
  maxSize?: number
  outputType?: string
}>()

const emit = defineEmits<{
  (e: 'update:visible', visible: boolean): void
  (e: 'cancel'): void
  (e: 'confirm', base64: string): void
}>()

const cropperRef = ref()

// 旋转
const rotate = (deg: number) => {
  if (cropperRef.value) {
    cropperRef.value.rotate(deg)
  }
}

// 缩放
const zoom = (ratio: number) => {
  if (cropperRef.value) {
    cropperRef.value.changeScale(ratio)
  }
}

// 取消
const onCancel = () => {
  emit('update:visible', false)
  emit('cancel')
}

// 确认并导出图片
const onConfirm = () => {
  if (cropperRef.value) {
    cropperRef.value.getCropData((data: string) => {
      emit('confirm', data)
      emit('update:visible', false)
    })
  }
}
</script>

<style scoped>
.cropper-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.cropper-container {
  width: 90%;
  max-width: 600px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
}

.cropper-header {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.cropper-header h3 {
  margin: 0;
  font-size: 18px;
}

.cropper-content {
  height: 400px;
  background: #f5f5f5;
}

.cropper-footer {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eee;
}

.zoom-controls button {
  width: 40px;
  height: 40px;
  margin-right: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

.zoom-controls button:hover {
  background: #f5f5f5;
}

.action-buttons button {
  padding: 8px 24px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

.action-buttons .cancel {
  background: #f5f5f5;
  color: #666;
  margin-right: 12px;
}

.action-buttons .confirm {
  background: #007bff;
  color: white;
}

.action-buttons button:hover {
  opacity: 0.9;
}

/* 添加一些必要的样式 */
:deep(.vue-cropper) {
  background: #f5f5f5 !important;
}

:deep(.cropper-view-box) {
  outline: 1px solid #007bff;
}

:deep(.cropper-point) {
  background-color: #007bff;
}

:deep(.cropper-line) {
  background-color: #007bff;
}

:deep(.cropper-face) {
  background-color: inherit;
}
</style> 